<template>
	<view class="full-page theme-1">
		<view class="logo-box">
			<image class="logo-img" src="https://nx5.abc5g.com/res/static/logo.png"></image>
			<!-- <u-image height="200rpx"  mode="aspectFit" class="sentence-img" src="https://nx5.abc5g.com/res/static/logo.png"></u-image> -->
			<text class="title">欢迎登录</text>
		</view>
		<u-form ref="uForm" class="form-box" :model="formData" :rules="rules">
			<u-form-item class="input-ri" name="username" prop="username" label="账号">
				<u-input v-model="formData.username" @focus="show=!show" type="text" placeholder="请输入账号" />
				<!-- <u-select v-model="show" :list="listUserName" label-name="label" value-name="value" @confirm="confirm"></u-select> -->
			</u-form-item>
			<u-form-item class="input-ri" name="password" prop="password" label="密码">
				<u-input v-model="formData.password" type="password" placeholder="请输入密码" />
			</u-form-item>
		</u-form>
		<u-button type="warning" class="submit-button" @click="handleLogin">登 录</u-button>
		<view class="bottom-box"></view>
		<view class="text-align-center">当前版本：{{version}}</view>
	</view>
</template>

<script>
	import { getVersion, ktlapi, ktluser, OT } from '@/utils/index.js';
	import { mapStores, mapState, mapActions } from 'pinia';
	import { useUserStore } from '@/store/user';
	onShareAppMessage(()=>{})
	export default {
		data() {
			return {
				show: false,
				version: getVersion(),
				listUserName: [
					{
						value: '00000000000',
						label: '老师：教练A',
						password: '000000'
					},
					{
						value: '88888888888',
						label: '老师：蓝老师',
						password: '888888'
					},
					{
						value: '99999999999',
						label: '学生：999999',
						password: '999999'
					},
					{
						value: '66666666666',
						label: '学生：666666',
						password: '666666'
					}
				],
				formData: {
					username: '',
					password: '',
				},
				rules: {
					username: {
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			...mapActions(useUserStore, ['setCurrentRoles']),
			confirm(e){
				console.log('confirm', e);
				if(e && e[0]){
					this.formData.username = e[0].value;
					const found = this.listUserName.find(item => item.value === e[0].value)
					console.log(found)
					if (found) {
						this.formData.password = found.password;
					}
				}
			},
			handleLogin() {
				ktlapi({
					apiurl: OT.CommandSet,
					action: "UserLogin",
					data: {
						"UserName": this.formData.username,
						"Password": this.formData.password
					}
				}).then(res => { 
					console.log(res);
					if (res.data.tables[0].table.length == 0) {
						uni.showToast({
							title: '账号无效',
							icon: "error",
							duration: 2000
						});
					} else {
						var userdata = res.data.tables[0].table[0];
						var roledata = res.data.tables[1].table; 
						userdata.Roles = roledata; 
						ktluser.setUser(userdata);
						this.setCurrentRoles(ktluser.Roles())
						// setTimeout(()=>{
						// 	console.log(ktluser.hasRole(2));
						// },5000);
						// return;
						if (ktluser.hasRole(2)) {
							// 教师
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							})
						} else if (ktluser.hasRole(3)) {
							// 学生
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							})
						} else if (ktluser.hasRole(4)) {
							//家长
						} else if (ktluser.hasRole(6)) {
							//合伙人
						} else {
							uni.showToast({
								title: '未知角色',
								icon: "error",
								duration: 2000
							});
						} 
					}
				}) 
			},
		},
		computed: {
			...mapStores(useUserStore),
			...mapState(useUserStore, ['currentRoles']),
		},
		mounted(){
			// uni.hideTabBar(); 
			
			if(ktluser.logined()){
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.full-page {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.logo-img {
		height: 200rpx;
		width: 200rpx;
	}
	
	.title {
		font-size: var(--text-18);
		margin-top: 30rpx;
	}

	.form-box {
		margin-top: 60rpx;
		width: 500rpx;
	}
	
	.submit-button {
		margin-top: 36rpx;
		width: 500rpx;
		height: 76rpx !important;
		font-size: var(--text-14) !important;
		border-radius: 20rpx;
		background-color: #f55f22 !important;
	}
	
	.bottom-box {
		height: 100rpx;
	}
		
	/* logo样式 */
	.logo-box {
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	/* 输入框样式 */
	.input-ri {
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 4px;
		padding-top: 0.455rem !important;
		padding-bottom: 0.455rem !important;
		
		::v-deep(.u-form-item__body) {
			padding-left: 8px !important;
		}
		
		::v-deep(.u-form-item--left) {
			font-size: var(--text-16);
		}
		
		::v-deep(.input-placeholder) {
			font-size: var(--text-16);
		}
		
		::v-deep(.input) {
			padding-left: 5px;
			padding-right: 5px;
		}
		
		::v-deep(.u-form-item--right) {
			margin-right: 8px;
		
			.u-form-item--right__content__icon {
				font-size: var(--text-18);
			}
		}
	}

	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {
		.title {
			font-size: 30px;
			margin-top: 10px;
		}

		.form-box {
			margin-top: 30px;
			width: 400px;
		}

		.input-ri {
			margin-bottom: 20px;
			border-radius: 4px;
			padding-top: 0.455rem !important;
			padding-bottom: 0.455rem !important;

			::v-deep(.u-form-item__body) {
				padding-left: 8px !important;
			}

			::v-deep(.u-form-item--left) {
				font-size: 16px;
			}

			::v-deep(.input-placeholder) {
				font-size: 16px;
			}

			::v-deep(.input) {
				padding-left: 5px;
				padding-right: 5px;
				width: 400px;
			}

			::v-deep(.u-form-item--right) {
				margin-right: 8px;

				.u-form-item--right__content__icon {
					font-size: 20px;
				}
			}
		}

		.submit-button {
			margin-top: 18px;
			width: 400px;
			height: 48px !important;
			font-size: 20px !important;
			border-radius: 20px;
		}

		.bottom-box {
			height: 50px;
		}
	}

	/* 针对 1366px 分辨率 */
	@media(min-width:1300px) {}

	/* 针对 1920px 分辨率 */
	@media(min-width:1890px) {

		.bottom-box {
			height: 250px;
		}
	}

</style>